<template>
    <div style="height: 100%">
        <navbar :title="$t('registration_approval')"></navbar><!--报名审批-->
        <div class="content-noBottom">
            <div class="box-tab-01 paddingLR15 white-bg bottom-shadow-02">
                <ul class="clearfix">
                    <li class="color666" :class="{'cur': selected == 0}" @click="selectType(0)">{{ $t("status_pending_approval") }}</li><!--待审批-->
                    <li class="color666" :class="{'cur': selected == 1}" @click="selectType(1)">{{ $t("status_approved") }}</li><!--已审批-->
                </ul>
            </div>
            <div style="height: calc(100% - 44px);" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getApprovalList"
                    style="padding-bottom: 56px;"
                    >
                        <div :class="{'height100' : total === 0}" v-if="selected === 0">
                            <ul class="module-list-box" v-if="total > 0">
                                <li class="white-bg" v-for="(aeItem, index) in approvalList" :key="index">
                                    <div class="title-box">
                                        <p @click="() => {$router.push({path: `/personal/${cwnEncrypt(aeItem.usrEntId)}`})}">{{$t("approval_user_name")}}: <span>{{aeItem.usrSteUsrId}}</span></p>
                                        <p>{{$t("personal_files_fullName")}}: <span>{{aeItem.usrDisplayBil}}</span></p>
                                        <p>{{$t("approval_train_name")}}: <span>{{ aeItem.itmTitle }}</span></p>
                                        <p>{{$t("approval_course_start_time")}}: <span>{{ aeItem.itmEffStartDatetime ?  (aeItem.itmEffStartDatetime | conversionTime) : $t("after_approval") }}</span></p>
                                        <p style="margin-bottom: 10px;">{{$t("approval_time")}}: <span>{{ aeItem.appCreateTimestamp | conversionTime }}</span></p>

                                        <span class="btn-box btn-blue" @click="handleAllow(aeItem.appId)">{{$t("approve_status_4")}}</span>
                                        <span class="btn-box btn-blue" style="background-color: #075ebb;margin-left: 10px;" @click="handleRefuse(aeItem.appId)">{{$t("approve_status_3")}}</span>
                                    </div>

                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div :class="{'height100' : total === 0}" v-if="selected === 1">
                            <ul class="module-list-box">
                                <li class="white-bg" v-for="(item, index) in approvalList" :key="index">
                                    <div class="title-box">
                                        <p  @click="() => {$router.push({path: `/personal/${cwnEncrypt(item.usrEntId)}`})}">{{$t("approval_user_name")}}: <span>{{item.usrSteUsrId}}</span></p>
                                        <p>{{$t("personal_files_fullName")}}: <span>{{item.usrDisplayBil}}</span></p>
                                        <p>{{$t("approval_train_name")}}: <span>{{ item.itmTitle }}</span></p>
                                        <p>{{$t("approval_course_start_time")}}: <span>{{ item.itmEffStartDatetime ?  (item.itmEffStartDatetime | conversionTime) : $t("after_approval") }}</span></p>
                                        <p>{{$t("approval_time")}}: <span>{{ item.appCreateTimestamp | conversionTime }}</span></p>
                                    </div>
                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <!--查看 end-->
    </div>
</template>

<script>
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';

export default {
    name: 'Approval',
    data() {
        return {
            pageNo: 1,
            selected: 0,
            approvalList: [],
            total: 0,
            isApproval: false,
            isView: false,
            approvalTips: false, //审批后弹出层
            approvalTipsTitle: '', //审批后弹出层提示语
            aeItem: {},
            learnInfo: {},
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getApprovalList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        selectType(index) {
            this.isLoading = true;
            this.selected = index;
            this.pageNo = 1;
            this.finished = false;
            this.approvalList = [];
            this.getApprovalList('refresh');
        },
        getApprovalList(option) {
            let url = '';
            if (this.selected === 0) {
                url = '/app/api/trainee/my/ds-aproval-list/PENDING';
            } else {
                url = '/app/api/trainee/my/ds-aproval-list/HISTORY';
            }

            this.$axios({
                method: 'POST',
                url: url,
                params: {
                    pageNo: this.pageNo
                }
            }).then(res => {
                let _data = res.data;
                if (_data.results) {
                    if (option && option === 'refresh') {
                        this.approvalList = _data.results;
                    } else {
                        this.approvalList = [...this.approvalList, ..._data.results];
                    }
                }
                this.total = _data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.approvalList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /**
         * 审批单行
         * */
        handleAllow(appId) {
            const data = {
                actionId: 1,
                appIdList: [appId],
                content: ''
            };
            this.approvalApp(data);
        },
        /**
         * 不批准单行
         * */
        handleRefuse(appId) {
            const data = {
                actionId: 2,
                appIdList: [appId],
                content: ''
            };
            this.approvalApp(data);
        },
        async approvalApp(data) {
            const resp = await this.$axios.post('/app/api/trainee/my/approval', data);
            this.pageNo = 1;
            this.getApprovalList('refresh');
            return resp;
        }
    },
    mounted() {
        this.getApprovalList('refresh');
    }
};
</script>

<style scoped lang="less">
    .module-list-box > li {
        border-bottom: 1px solid #e6e6e6;
        padding: 0 15px;
        p{
            margin-bottom: 5px;
            span{
                margin-left: 5px;
            }
        }
        &:nth-last-child(1) {
            border-bottom: none;
        }
        & > .title-box {
            padding: 20px 0 25px;
            p:nth-of-type(1) {
                color: #1f53cc;
                font-weight: bold;
            }
        }
        .cont-box {
            padding-bottom: 20px;
            div {
                float: left;
                width: calc(100% - 123px);
                padding: 5px 0 0;
            }
            .btn-box {
                float: right;
                margin: 12px 0 0 0;
            }
        }
    }
    .user-pic-4 {
        float: left;
        margin-right: 10px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        img {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid #e6e6e6;
        }
    }
    .paddingLeft44 {
        padding-left: 22px;
    }
    .module-route-box {
        padding: 30px 0 40px;
    }
    .circle-pattern {
        margin-left: -22px;
        &:before {
            content: "";
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #e5e5e5;
            margin: 2px 10px 0 0;
        }
        &.cur:before {
            content: "";
            background: #075ebb;
        }
    }
    .route-box {
        height: 70px;
        div {
            padding: 5px 0 10px;
        }
    }
    .route-pattern {
        margin-left: -22px;
        &:before{
            content: "";
            float: left;
            width: 12px;
            height: 100%;
            margin: 0 5px;
            border-left: 2px dashed #e5e5e5;
        }
        &.cur:before {
            border-left: 2px solid #075ebb;
        }
    }
</style>
